<!--
  - author：Hs
  - description：底部按钮
                 @leftButtonText:"左侧按钮文字"
                 @rightButtonText:"右侧按钮文字" （或者只有一个按钮，默认是"确定"）
-->
<template>
  <view class="box-button bg_white border_box flex flex_align justify_b">
    <button
      v-if="leftButtonText"
      class="button left"
      :disabled="disabled"
      @click="confirm('left')"
    >
      {{ leftButtonText }}
    </button>
    <button
      v-if="rightButtonText"
      class="button right"
      :disabled="disabled"
      :loading-text="rightLoadingText"
      @click="confirm('right')"
    >
      {{ rightButtonText }}
    </button>
  </view>
</template>

<script>
export default {
  props: {
    leftButtonText: {
      type: String,
      default: "",
    },
    rightButtonText: {
      type: String,
      default: "确定",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    rightLoadingText: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    confirm(data) {
      this.$emit("buttonConfirm", data);
    },
  },
};
</script>


<style lang="scss" scoped>
.box-button {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 70px;
  padding: 11px 15px;
  background: var(--bg-gray);
  color: var(--font-color);
  .button {
    flex: 1;
    height: 48px;
    border-radius: 4px;
    font-size: 18px;
  }
  .left {
    margin-right: 15px;
    border: 1px solid #cccccc;
    background: #fff;
  }
  .right {
    color: #fff;
    background: var(--bg-theme);
  }
  .group {
    width: 33px;
    margin-right: 25px;
    text-align: center;
    font-size: 11px;
    img {
      width: 33px;
      height: 33px;
    }
  }
  .van-button--normal {
    padding: 0;
  }
}
</style>